﻿/**
    侧边菜单
*/
.sidemenu
    // 外层框是个nav
    &-box
        background-color: var-grayback
        user-select: none
        padding: 15px
    // 每个菜单组是一个ul
    &-group
        margin: 0
        padding: 10px 0
        list-style: none
    // 菜单项
    &-item
        display: block
        color: var-font-color
        cursor: pointer
        text-decoration: none
        padding: 0.4em 0 0.4em 2.4em
        font-weight: 500
    // 菜单项的下划线去掉
    &-item:hover
        text-decoration: none
        color: var-font-color
    // 菜单项选中
    &-item.active
        font-weight: 600
    // 菜单项hover
    &-item:hover
        background-color: var-graybackse
    // 菜单组标题
    &-label
        display: block
        position: relative
        width: 100%
        padding: 5px
        font-weight: 600
        cursor: pointer
    // 菜单组标题右侧三角型 向左(收起时) 向下(展开时)
    &-arrleft, &-arrdown
        position: absolute
        top: 10px
        right: 0
    &-arrleft
        triangle(8px, left, var-font-color)
    &-arrdown
        triangle(8px, bottom, var-font-color)
    // 菜单组关闭
    &-group-close &-item
        display: none
// 颜色
sidemenuColors = { primary: var-primary, danger: var-danger, success: var-success }
for key, val in sidemenuColors
    .sidemenu
        &-box.{key}
            background-color: val
        &-box.{key} &-item.active
            color: #fff
		&-box.{key} &-item:hover
            background-color: var-grayback